import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { resolve } from 'path';
import postCssPxToRem from "postcss-pxtorem"
import postcsspxtoviewport from 'postcss-px-to-viewport'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: [
      { find: '@assets', replacement: resolve(__dirname, 'src/assets') },
      { find: '@runtime', replacement: resolve(__dirname, 'src/runtime') },
      { find: '@components', replacement: resolve(__dirname, 'src/components') },
    ]
  },
  build: {
    // outDir: 'D:/平台UI/Platform/Externals/智能网联汽车环境感知系统虚拟仿真比赛软件/UI',
    outDir: 'D:/运行环境/P10093/UI',
    emptyOutDir: true,
    assetsDir: 'assets',
  },
  server: {
    cors: true,
    host: "127.0.0.1",
    open: true,
    proxy: {
      '/api': {
        target: 'http://virtual.eduhenghong.cn:4497/api',
        changeOrigin: true,
        rewrite: path => path.replace(/^\/api/, '')
      },
    },
  },
  css: {
    postcss: {
      // plugins: [
      //   postCssPxToRem({
      //     rootValue: 10, // 1rem的大小
      //     propList: ['*'], // 需要转换的属性，这里选择全部都进行转换
      //     // rootValue: 192, //换算基数， 
      //     // unitPrecision: 3, //允许REM单位增长到的十进制数字,小数点后保留的位数。
      //     // propList: ['*'],
      //     // exclude: false,  //默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值
      //     // selectorBlackList: ['.van'], //要忽略并保留为px的选择器，本项目我是用的vant ui框架，所以忽略他
      //     // mediaQuery: false,  //（布尔值）允许在媒体查询中转换px。
      //     // minPixelValue: 1 //设置要替换的最小像素值
      //   })
      // ],
      plugins: [
        postcsspxtoviewport({
          unitToConvert: "rem", // 要转化的单位
          viewportWidth: 192, // UI设计稿的宽度
          viewportHeight: 108, // 视窗的高度
          unitPrecision: 6, // 转换后的精度，即小数点位数
          propList: ["*"], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
          viewportUnit: "vw", // 指定需要转换成的视窗单位，默认vw
          fontViewportUnit: "vw", // 指定字体需要转换成的视窗单位，默认vw

          // selectorBlackList: ["ignore-"], // 指定不转换为视窗单位的类名，
          minPixelValue: 0, // 默认值1，小于或等于1px则不进行转换
          // mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
          // replace: true, // 是否转换后直接更换属性值
          // landscape: false, // 是否处理横屏情况
        }),
      ],
    }
  },
})
